<template>
  <div class="node-setting">
    <el-scrollbar class="side-scroll-bar">
      <el-tabs
        v-model="firstTab"
        type="card"
        class="no-bottom-margin indent-left-margin"
        @tab-click="handleClick"
      >
        <el-tab-pane name="style">
          <span slot="label"><svg-icon icon-class="zujian" />外观</span>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="位置和大小" name="1">
              <div class="form-item">
                <div class="form-item-title"><span>X</span></div>
                <el-input-number
                  v-model="setting.x"
                  controls-position="right"
                  @change="settingChange('x')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>Y</span></div>
                <el-input-number
                  v-model="setting.y"
                  controls-position="right"
                  @change="settingChange('y')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>宽</span></div>
                <el-input-number
                  v-model="setting.w"
                  controls-position="right"
                  @change="settingChange('w')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>高</span></div>
                <el-input-number
                  v-model="setting.h"
                  controls-position="right"
                  @change="settingChange('h')"
                ></el-input-number>
              </div>
            </el-collapse-item>
            <el-collapse-item title="样式" name="2">
              <div class="form-item">
                <div class="form-item-title"><span>边的宽度</span></div>
                <el-input-number
                  v-model="setting.lineWidth"
                  controls-position="right"
                  @change="settingChange('lineWidth')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>边的颜色</span></div>
                <el-color-picker
                  v-model="setting.lineColor"
                  @change="settingChange('lineColor')"
                ></el-color-picker>
              </div>

              <div class="form-item">
                <div class="form-item-title"><span>内部颜色</span></div>
                <el-color-picker
                  v-model="setting.bkcolor"
                  @change="settingChange('bkcolor')"
                ></el-color-picker>
              </div>
            </el-collapse-item>
            <el-collapse-item title="文字" name="3">
              <div class="form-item">
                <div class="form-item-title"><span>文本内容</span></div>
                <el-input
                  v-model="setting.text"
                  class="input-content"
                  @change="settingChange('text')"
                ></el-input>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>字体大小</span></div>
                <el-input-number
                  v-model="setting.fontsize"
                  controls-position="right"
                  @change="settingChange('fontsize')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>字体颜色</span></div>
                <el-color-picker
                  v-model="setting.fontcolor"
                  @change="settingChange('fontcolor')"
                ></el-color-picker>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>水平偏移</span></div>
                <el-input-number
                  v-model="setting.textdx"
                  controls-position="right"
                  @change="settingChange('textdx')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>垂直偏移</span></div>
                <el-input-number
                  v-model="setting.textdy"
                  controls-position="right"
                  @change="settingChange('textdy')"
                ></el-input-number>
              </div>
            </el-collapse-item>
            <!-- <el-collapse-item title="图片" name="4"> </el-collapse-item> -->
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane name="data">
          <span slot="label"><svg-icon icon-class="moxingzujian" />数据</span>

          <el-collapse v-model="activeData" @change="handleChange1">
            <el-collapse-item title="基础数据" name="4">
              <div class="form-item">
                <div class="form-item-title"><span>ID</span></div>
                <el-input
                  v-model="setting.id"
                  :disabled="true"
                  class="input-content"
                ></el-input>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>车站名称</span></div>
                <el-input
                  v-model="setting.text"
                  class="input-content"
                  @change="settingChange('text')"
                ></el-input>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>车站标识</span></div>
                <el-input
                  v-model="setting.kId"
                  class="input-content"
                  @change="settingChange('kId')"
                ></el-input>
              </div>
            </el-collapse-item>
            <el-collapse-item title="标签" name="1">
              <div class="form-item">
                <el-tag
                  :key="tag"
                  v-for="tag in setting.dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >
              </div>
            </el-collapse-item>
            <el-collapse-item title="线路信息" name="2">
              <div class="form-item">
                <el-checkbox-group
                  style="display: flex; flex-wrap: wrap"
                  v-model="setting.ln"
                  @change="settingChange('lines')"
                >
                  <el-checkbox
                    v-for="(item, index) in lineOptionsKey"
                    :key="index"
                    :label="item"
                  ></el-checkbox>
                </el-checkbox-group>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <template slot="title">
                数据<el-button
                  style="margin-left: 10px"
                  type="text"
                  icon="el-icon-plus"
                  @click.stop.prevent="addClick"
                ></el-button>
              </template>
              <div class="form-item"></div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {},
  computed: {
    ...mapState(["currentSetting", "currentPen", "linesOptions"]),
    currentTextNode() {
      if (this.currentPen && this.currentPen.id) {
        return window.$graph.getCellById(this.currentPen.id + "-text");
      } else {
        return null;
      }
    },
    lineOptionsKey() {
      return Object.keys(this.linesOptions);
    },
  },
  watch: {
    "currentSetting.id": {
      // 当切换节点数据时， 仅有id变化才会更新setting，
      // 其他情况 不通过store来更新data
      handler: function (val, oldval) {
        this.setting = {
          ...this.currentSetting,
        };
      },
      deep: true,
    },
  },
  mounted() {},
  data() {
    return {
      firstTab: "style",
      activeNames: ["1", "3", "2"],
      activeData: ["1", "2", "3", "4"],
      setting: {
        x: "",
        y: "",
        h: "",
        w: "",
        lineWidth: 1,
        lineColor: "",
        bkcolor: "",
        fontsize: 12,
        fontcolor: "",
        textdx: 0,
        textdy: 0,
        text: "",
        kId: "",
        id: "",
        dynamicTags: [],
        ln: [],
        ldbm: [],
      },
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    settingChange(type) {
      let tdx = 0,
        tdy = 0;
      switch (type) {
        case "x":
        case "y":
          this.currentPen.position(this.setting.x, this.setting.y);
          tdx = this.setting.x + this.setting.textdx;
          tdy = this.setting.y + this.setting.textdy;

          this.currentTextNode.position(tdx, tdy);
          break;
        case "w":
        case "h":
          this.currentPen.size(this.setting.w, this.setting.h);
          break;
        case "lineWidth":
          this.currentPen.attr("body/width", this.setting.lineWidth);
          break;
        case "lineColor":
          this.currentPen.attr("body/stroke", this.setting.lineColor);
          break;
        case "bkcolor":
          this.currentPen.attr("body/fill", this.setting.bkcolor);
          break;
        case "text":
          this.currentPen.setData({ sn: this.setting.text }, { slient: true });
          this.currentTextNode.attr("label/text", this.setting.text);
          break;
        case "fontsize":
          this.currentTextNode.attr("label/fontSize", this.setting.fontsize);
          break;
        case "fontcolor":
          this.currentTextNode.attr("label/fill", this.setting.fontcolor);
          break;
        case "textdx":
        case "textdy":
          tdx = this.setting.x + this.setting.textdx;
          tdy = this.setting.y + this.setting.textdy;

          this.currentTextNode.position(tdx, tdy);
          break;
        case "dynamicTags":
          console.log("kkkkk");
          this.currentPen.setData(
            {
              dynamicTags: this.setting.dynamicTags,
            },
            {
              deep: false,
            }
          );
          break;
        case "lines":
          this.currentPen.setData(
            {
              ln: this.setting.ln,
              ldbm: this.setting.ln.map((item) => this.linesOptions[item].dbm),
            },
            {
              deep: false,
            }
          );
          break;
        case "kId":
          this.currentPen.setData({ sdbm: this.setting.kId }, { slient: true });
          break;
      }
    },
    handleClick() {},
    handleChange(val) {},
    handleChange1() {},
    handleClose(tag) {
      this.setting.dynamicTags.splice(this.setting.dynamicTags.indexOf(tag), 1);
      this.settingChange("dynamicTags");
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.setting.dynamicTags.push(inputValue);
        this.settingChange("dynamicTags");
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    addClick() {},
  },
};
</script>
<style lang="scss" scoped>
.node-setting {
  width: 100%;
  height: 100%;
  :deep(.el-scrollbar__view) {
    width: 100%;
    height: 100%;
  }
  .form-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .form-item-title {
      width: 100px;
      text-align: left;
    }
  }
  .el-tag {
    margin-bottom: 10px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    margin-bottom: 10px;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    margin-bottom: 10px;
    vertical-align: bottom;
  }

  .input-content {
    width: 180px;
  }
}
</style>
